<template>
  <div class="artDetailCont container">
    <div class="singerHeader">
      <div class="singerDetailHeader">
        <div class="leftImg">
          <img :src="data.picUrl" alt="" />
        </div>
        <div class="rightContent">
          <h1 class="name">{{ data.name }}</h1>
          <div class="description">
            <p>{{ data.name }}<br />{{ data.desc }}</p>
            <i @click="dialogVisible = true">更多></i>
          </div>
          <el-dialog
            v-model="dialogVisible"
            :title="data.name"
            width="50%"
            :before-close="handleClose"
          >
            <div v-for="item in data.detail">
              <h2>{{ item.ti }}</h2>
              <p v-html="item.txt"></p>
            </div>
          </el-dialog>
          <button><i class="iconfont icon-aixin"> 收藏</i></button>
        </div>
      </div>
    </div>
    <div class="works-box">
      <p>作品</p>
      <span
        class="music-tab"
        :class="musicOrAlbum ? 'active' : ''"
        @click="musicOrAlbum = true"
        >热门单曲{{ total.musicTotal }}</span
      >
      <span
        class="album-tab"
        :class="musicOrAlbum ? '' : 'active'"
        @click="musicOrAlbum = false"
        >专辑{{ total.albumTotal }}</span
      >
    </div>
    <MusicList v-if="musicOrAlbum" :currentPage="currentPage" />
    <AlbumList v-else :currentPage="currentPage" />
    <ElPagination
      :page-size="musicOrAlbum ? 50 : 15"
      :pager-count="7"
      layout="prev, pager, next"
      :total="musicOrAlbum ? total.musicTotal : total.albumTotal"
      :current-page="currentPage"
      @current-change="pageChange"
    >
    </ElPagination>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ArtDetail",
});
</script>
<script setup lang="ts">
import MusicList from "./component/MusicList.vue";
import AlbumList from "./component/AlbumList.vue";
import { ref, onMounted, reactive } from "vue";
import request from "../../utils/request";
import { useRoute } from "vue-router";
import { ElPagination } from "element-plus";
const route = useRoute();
//控制模态框开关
const dialogVisible = ref<boolean>(false);
const handleClose = () => {
  dialogVisible.value = false;
};
//歌曲和专辑的切换
const musicOrAlbum = ref<boolean>(true);
//歌手相关信息
const data = reactive({
  name: "",
  picUrl: "",
  desc: "",
  detail: [],
});
//当前页
const currentPage = ref<number>(1);
const pageChange = (val: number) => {
  currentPage.value = val;
};
const total = reactive({
  musicTotal: 0,
  albumTotal: 0,
});
onMounted(() => {
  request("/artist/songs", {
    id: route.params.id,
    limit: 300,
  }).then((result) => {
    total.musicTotal = result.data.songs.length;
  });
  request("/artist/album", {
    id: route.params.id,
    limit: 300,
  }).then((result) => {
    total.albumTotal = result.data.hotAlbums.length;
  });

  //请求歌手的描述信息
  request("/artist/desc", { id: route.params.id }).then((result) => {
    data.desc = result.data.briefDesc;
    data.detail = result.data.introduction.map((item) => {
      return {
        ti: item.ti,
        txt: item.txt.replace(/\n/g, "<br>"),
      };
    });
  });
  //请求歌手名字和图片
  request("/artist/detail", { id: route.params.id }).then((result) => {
    data.name = result.data.data.artist.name;
    data.picUrl = result.data.data.artist.cover;
  });
  //请求歌手所有的歌曲信息
});
</script>
<style lang="less">
.artDetailCont {
  width: 100%;
  .singerHeader {
    width: 100%;
    background-color: #f8f8f8;
    .singerDetailHeader {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      padding: 40px 0;
      .leftImg {
        margin-right: 60px;
      }
      img {
        width: 220px;
        height: 220px;
        border-radius: 50%;
      }
      h1 {
        font-size: 30px;
        font-weight: 600;
      }
      .description {
        position: relative;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 50px;
        p {
          width: 920px;
          padding-right: 50px;
          margin-top: 50px;
          height: 56px;
          line-height: 28px;
          color: #909399;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
        i {
          line-height: 28px;
          position: absolute;
          bottom: 0;
          right: 0px;
          color: #e61723;
        }
      }
      button {
        padding: 10px 25px;
        border-radius: 40px;
        font-weight: 400;
        border: none;
        font-size: 16px;
        color: #303133;
        background-color: #fff;
      }
    }
  }
  .works-box {
    width: 1200px;
    margin: 50px auto;
    line-height: 40px;
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    p {
      font-size: 28px;
      margin-right: 45px;
    }
    .music-tab,
    .album-tab {
      cursor: pointer;
    }
    .music-tab {
      font-size: 16px;
      margin-right: 40px;
    }
    .album-tab {
      font-size: 16px;
    }
    .active {
      border-bottom: 1px solid #303133;
    }
  }
}
</style>
<style lang="less">
.container {
  li {
    cursor: pointer;
    list-style: none;
  }
  .el-pagination {
    text-align: center !important;
    font-weight: 400 !important;
    button {
      width: 40px;
      height: 40px;
      box-sizing: border-box;
      font-size: 12px;
      text-align: center;
      i {
        width: auto !important;
        font-weight: 700;
      }
      &:hover {
        color: #e61723;
      }
    }
    .btn-prev {
      padding-left: 6px;
      padding-right: 12px;
    }
    .btn-next {
      padding-left: 12px;
      padding-right: 6px;
    }
    li {
      width: 40px;
      height: 40px;
      box-sizing: border-box;
      padding: 0 4px;
      font-size: 14px;

      line-height: 40px !important;
      text-align: center;
      &:hover {
        color: #e61723;
      }
    }
    .active {
      background-color: #e61723;
      color: white;
    }
  }
}
</style>
